<template>
    <a-control-group
        class="a-input-password"
        :class="[formItem ? 'c-f-grow-1' : '']"
    >
        <a-input-string
            class="c-f-grow-1"
            :color="myColor"
            :size="mySize"
            :sharp="mySharp"
            :disabled="myDisabled"
            :clearable="clearable"
            :isInner="true"
            :type="isShowPassword ? 'text' : 'password'"
            @update:value="input"
            :value="value"
            :placeholder="placeholder"
        ></a-input-string>
        <a-button
            v-if="attachButtonShown"
            class="action c-f-shrink-0"
            :color="myColor"
            :size="mySize"
            :sharp="mySharp"
            :disabled="myDisabled"
            :square="true"
            @click="isShowPassword = !isShowPassword"
            ><span
                class="fa"
                :class="isShowPassword ? 'fa-eye-slash' : 'fa-eye'"
            ></span
        ></a-button>
    </a-control-group>
</template>

<style lang="scss" scoped>
.a-input-password {
    width: 280px;
}
</style>

<script>
import AInputString from './AInputString.vue'
import AButton from './AButton.vue'
import AControlGroup from './AControlGroup.vue'
import inputMixin from "../common/inputMixin"

export default {
    components: { AInputString, AButton, AControlGroup },
    mixins: [inputMixin],
    emits: ['focus', 'blur'],
    props: {
        value: {
            type: String,
            default: null
        },
        clearable: {
            type: Boolean,
            default: true,
        },
        placeholder: {
            type: String,
            default: null
        },
        attachButtonShown: {
            type: Boolean,
            default: true,
        }
    },
    data() {
        return {
            isShowPassword: false,
        }
    },
    methods: {
        input(val) {
            this.$emit('update:value', val)
        }
    }
}
</script>